<script setup lang="ts">
import { useWebxRouteTabs, useWebxTable } from "@webxue/vue3-antdv-ui";
import { AppstoreOutlined, PlusOutlined } from "@ant-design/icons-vue";
import { BaseApi } from "@/apis/base.api";
import { message } from "ant-design-vue";
import { useUserStore } from "@/stores/user.store";
import useUser from "@/hooks/useUser";
import useCusRouter from "@/hooks/useCusRouter";

const props = defineProps({
  // 开发者id，存在时查指定开发者用户的应用，否则查所有开发者用户的应用
  developerId:{ type:String, default:"" },
  // 用户昵称
  nickName:{ type:String, default:"" }
});
const { router } = useCusRouter();
const { addTab } = useWebxRouteTabs({ router });
const { searchForm, dataSource, columns, pagination, doRefresh, doSearch, doReset, doCreate, doUpdate, doDelete } = useWebxTable({
  searchForm:{
    name:""
  },
  tableColumns:[
    { title: "序号", dataIndex: "index", align: "center", width: 50 },
    { title: "昵称", dataIndex: "user.nickName", width: 100 },
    { title: "状态", dataIndex: "status", width: 100 },
    { title: "状态描述", dataIndex: "statusMsg" },
    { title: "备注", dataIndex: "remark" },
    { title: "操作", dataIndex: "operate", width: 120 }
  ],
  async api(params:any){
    const requestBody:Record<string, any> = {
      page: params.page,
      size: params.size
    };
    // 查指定开发者的应用
    if(props.developerId) {
      requestBody.developerId = props.developerId;
    }
    const response = await BaseApi.devApp.list(requestBody);
    return Promise.resolve(response.data);
  },
  // 新增
  async onCreate() {
    addTab({
      title: "创建新应用",
      href: "/devApp/form",
      key: "create-devApp",
    })
  },
  // 编辑
  async onUpdate(record:any) {
    addTab({
      title: "编辑应用-" + record.name,
      href: "/devApp/form?devAppId=" + record.id,
      key: "edit-devApp-" + record.id,
    })
  },
  // 删除
  async onDelete(record:any) {
    const response = await BaseApi.devApp.delete({ ids: record.id });
    if(response.success) {
      await useUser().refresh();
      message.success("应用移除");
      await doSearch();
    }
  }
});

// 获取当前登录用户对app的操作权限
function getPremission(app:any){
  // 编辑：当前登录用户是开发者 && 当前应用属于当前登录用户
  const edit = useUserStore().isDeveloperSucc && useUserStore().userInfo.developerId === app.developerId;
  // 删除：(当前登录用户是开发者 && 当前应用属于当前登录用户) || 拥有删除开发者应用权限的角色
  const del = (useUserStore().isDeveloperSucc && useUserStore().userInfo.developerId === app.developerId)
      || useUserStore().hasPermission("devApp:delete");

  return { edit, del };
}

// 查看开发者应用详情
function viewDevAppInfo(app:any){
  addTab({
    title: app.name,
    key: "view-devApp-" + app.id,
    href: "/devApp/form?readonly=1&devAppId=" + app.id,
  })
}
</script>

<template>
  <div class="h-full flex flex-col gap-2">
    <div class="flex-shrink-0 p-2 bg-white" v-if="nickName" >
      <WebxTitle :title="nickName + '的应用'" />
    </div>
    <!-- 查询条件 -->
    <WebxSearch
        :model="searchForm"
        @submit="doSearch"
        @reset="doReset"
    >
      <AFormItem label="关键词">
        <AInput v-model:value="searchForm.name" placeholder="请输入关键词" />
      </AFormItem>
      <template #searchLeft>
        <AButton type="primary" @click="doCreate" v-if="useUserStore().isDeveloperSucc"><PlusOutlined/> 创建应用</AButton>
      </template>
    </WebxSearch>
    <!-- 数据 -->
    <WebxGridList class="flex-1 p-2" :dataSource="dataSource as any[]" :pagination="pagination"
                  :showFooter="(app) => getPremission(app).edit || getPremission(app).edit">
      <template #title="app">
        <div class="flex justify-between items-center gap-2" @click="viewDevAppInfo(app)">
          <div><AppstoreOutlined /></div>
          <div>{{ (app as any).name }}</div>
        </div>
      </template>
      <template #content="app">
        <div class="flex-1 text-gray-400 line-clamp-2">{{ (app as any).description }}</div>
        <div class="flex-shrink-0 text-end text-slate-400">{{ (app as any).developer.user.nickName }}</div>
      </template>
      <template #footer="app">
        <div><WebxBtn operate="edit" @click="doUpdate(app)" v-if="getPremission(app).edit" /></div>
        <div><WebxBtn operate="del" @delete="doDelete(app)" v-if="getPremission(app).del"/></div>
      </template>
    </WebxGridList>
  </div>
</template>

<style scoped lang="less"></style>
